/* === v-checkbox === */

.v-checkbox {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  user-select: none;
  cursor: pointer;
  color: @font-color;
  +.v-checkbox {
    margin-left: 5px;
  }
  &__input {
    white-space: nowrap;
    cursor: pointer;
    outline: none;
    display: inline-block;
    line-height: 1;
    position: relative;
    vertical-align: middle;
  }
  &__inner {
    background: #ffffff;
    display: inline-block;
    position: relative;
    border: @checkbox-border;
    border-radius: @checkbox-border-radius;
    box-sizing: border-box;
    width: 16px;
    height: 16px;
    z-index: 1;
    transition: border-color .25s cubic-bezier(.71,-.46,.29,1.46),
                background-color .25s cubic-bezier(.71,-.46,.29,1.46);
    &:hover {
      border: @checkbox-border-hover;
    }
    &:after {
      content: "";
      display: table;
      width: 3px;
      height: 7px;
      position: absolute;
      top: 1px;
      left: 5px;
      border: 2px solid #fff;
      border-top: 0;
      border-left: 0;
      transform: rotate(45deg) scaleY(0);
      transition: transform .15s cubic-bezier(.71,-.46,.88,.6) .05s;
      transform-origin: center;
    }
  }
  &__original {
    opacity: 0;
    outline: none;
    position: absolute;
    margin: 0;
    size: 0;
    left: -999px;
  }
  &__label {
    font-size: @font-size-base;
  }

  &.is-checked {
    .v-checkbox__inner {
      background: @default-color;
      border-color: @default-color;
      &:after {
        transform: rotate(45deg) scaleY(1);
      }
    }
  }
  &.is-focus {
    .v-checkbox__inner {
      border-color: @default-color;
    }
  }
  &.is-indeterminate {
    .v-checkbox__inner {
      background-color: @default-color;
      border-color: @default-color;

      &::before {
        content: '';
        position: absolute;
        display: block;
        border: 1px solid @white;
        margin-top: -1px;
        left: 3px;
        right: 3px;
        top: 50%;
      }

      &::after {
        display: none;
      }
    }
  }
  &.is-disabled {
    cursor: not-allowed;
    .v-checkbox__inner {
      cursor: not-allowed;
    }
    .v-checkbox__inner {
      background: @disabled-bg;
      border-color: @disabled-border;
    }
    &.is-checked {
      .v-checkbox__inner {
        background: @disabled-border;
        border-color: @disabled-border;
      }
    }
    .is-indeterminate {
      .v-checkbox__inner {
        background-color: @disabled-bg;
        border-color: @disabled-border;

        &::before {
          border-color: @disabled-border;
        }
      }
    }
  }
}
